<template>
  <view class="container">
    <view class="illustration">
      <image src="/static/01.png" mode="aspectFit"></image>
    </view>
    
    <view class="hint">
      <text class="main-text">请授权以继续使用</text>
    </view>
    
    <!-- 底部授权按钮容器 -->
    <view class="bottom-container">
      <button class="authorize-btn" @tap="openCard" hover-class="button-hover">
        授权登录
      </button>
    </view>
    
    <!-- 授权卡片 - 点击按钮后才会弹出 -->
    <view v-if="showCard" class="popup-overlay" @tap="cancel">
      <view class="card" @tap.stop>
        <!-- 卡片头部 -->
        <view class="card-header">
          <view class="avatar-container">
            <image v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" class="avatar" mode="aspectFill"></image>
            <view v-else class="avatar-placeholder">
              <text>用</text>
            </view>
          </view>
          <view class="user-info">
            <view class="username">{{ userInfo.nickName || '微信用户' }}</view>
            <view class="description">欢迎使用本应用</view>
          </view>
        </view>
        
        <!-- 卡片内容 -->
        <view class="card-content">
          <view class="usage-notice">
            <view class="notice-title">使用说明</view>
            <view class="notice-item">• 获取您的公开信息（昵称、头像等）</view>
            <view class="notice-item">• 提供个性化的服务体验</view>
            <view class="notice-item">• 保障您的账号安全</view>
          </view>
        </view>
        
        <!-- 卡片底部按钮 -->
        <view class="card-footer">
          <button class="cancel-btn" @tap="cancel">取消</button>
          <button class="confirm-btn" @tap="confirm">同意授权</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 状态管理
const showCard = ref(false);
const userInfo = ref({});

// 打开授权卡片
function openCard() {
  showCard.value = true;
  console.log('打开授权卡片');
}

// 取消授权
function cancel() {
  showCard.value = false;
  console.log('取消授权');
}

// 确认授权
function confirm() {
  console.log('开始获取用户信息');
  
  // 由于项目未与后端对接，且在开发环境中可能无法直接调用微信的getUserProfile接口
  // 这里提供一个模拟授权成功的实现
  // 在实际对接时，可以根据需要修改这部分代码
  
  // 模拟用户信息，使用项目中的静态图片作为头像
  const mockUserInfo = {
    nickName: '微信用户',
    avatarUrl: '/static/logo.png' // 使用项目中已有的静态图片
  };
  
  // 保存用户信息到本地
  userInfo.value = mockUserInfo;
  uni.setStorageSync('userInfo', userInfo.value);
  
  console.log('模拟授权成功', userInfo.value);
  
  // 隐藏卡片
  showCard.value = false;
  
  // 授权成功后跳转到登录页面
  uni.navigateTo({
    url: '/pages/login/login'
  });
  
  // 如果需要真实调用微信接口，可以取消下面的注释
  /*
  // 调用微信的getUserProfile接口获取用户信息
  wx.getUserProfile({
    desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中
    success: (res) => {
      console.log('获取用户信息成功', res);
      userInfo.value = res.userInfo;
      
      // 保存用户信息到本地
      uni.setStorageSync('userInfo', userInfo.value);
      
      // 隐藏卡片
      showCard.value = false;
      
      // 授权成功后跳转到登录页面
      uni.navigateTo({
        url: '/pages/login/login'
      });
    },
    fail: (err) => {
      console.error('获取用户信息失败', err);
      uni.showToast({
        title: '授权失败',
        icon: 'none'
      });
      showCard.value = false;
    }
  });
  */
}
</script>

<style>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  padding: 0 40rpx;
  position: relative;
}

.illustration {
  width: 400rpx;
  height: 400rpx;
  margin-bottom: 60rpx;
}

.illustration image {
  width: 100%;
  height: 100%;
}

/* 添加按钮触摸反馈样式 */
.button-hover {
  opacity: 0.8;
  transform: scale(0.98);
}

.hint {
  text-align: center;
  margin-bottom: 80rpx;
}

.main-text {
  font-size: 36rpx;
  color: #333333;
  font-weight: 500;
}

/* 底部按钮容器 */
.bottom-container {
  position: absolute;
  bottom: 80rpx;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 0 40rpx;
}

.authorize-btn {
  width: 100%;
  background-color: #00C853;
  color: #ffffff;
  border-radius: 80rpx;
  font-size: 32rpx;
  line-height: 96rpx;
  height: 96rpx;
  border: none; /* 移除默认边框 */
}

/* 自定义弹窗遮罩层 */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

/* 授权卡片样式 */
.card {
  width: 80%;
  max-width: 600rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.avatar-container {
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
  color: #999999;
}

.user-info {
  flex: 1;
}

.username {
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.description {
  font-size: 24rpx;
  color: #999999;
}

.card-content {
  margin-bottom: 30rpx;
}

.usage-notice {
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 10rpx;
}

.notice-title {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
  margin-bottom: 16rpx;
}

.notice-item {
  font-size: 24rpx;
  color: #666666;
  line-height: 44rpx;
}

.card-footer {
  display: flex;
  justify-content: space-between;
}

.cancel-btn, .confirm-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  border: none; /* 移除默认边框 */
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666666;
  margin-right: 20rpx;
}

.confirm-btn {
  background-color: #00C853;
  color: #ffffff;
}
</style>